import React, {memo, useEffect, useState} from 'react';
import FansStyle from "./FansStyle";
import SingCoverItem from "../../../../components/part/singCoverItem/SingCoverItem";
import {Pagination} from "antd";
import UnitBox from "../../../../components/part/unitBox/UnitBox";
import {UserVO} from "../../../../interface/UserInterface";
import {getFansListBySingerIdApi} from "../../../../services/followSinger";

type Props = {};
type SingCoverType={
  singName:string,
  singCover:string,

};
export default memo(function Fans(props: Props) {
  const userId=parseInt(localStorage.getItem("yf_gaduation_zzmusic_user_id") as string);
  const [fansList,setFansList]=useState<UserVO[]>([]);
  const [otherInfo,setOtherInfo]=useState<any>({});
  useEffect(() => {
    getFansListBySingerIdApi({singerId:userId}).then((result:any)=>{
      console.log(result);
      setFansList(result.data.data.data);
      setOtherInfo(result.data.data);
    },(error)=>{
      console.log(error);
    });
  }, []);
  return (
    <FansStyle>
      <UnitBox key="gdtj"
               title={"我的粉丝"}
               isShowLine={true}
      >
        <>
          <div className="fans-content">
            {
              fansList.map((item:UserVO,index)=>{
                return(<SingCoverItem
                  key={index}
                  singCover={item.cover}
                  singName={item.nickname}
                  isAmplify={true}
                  isRadius={true}
                  size={157}
                />)
              })
            }
          </div>

          {/* 使用antd分页器 */}
          <div className="fans-bottom-box">
            <Pagination defaultCurrent={otherInfo.pageNum}
                        defaultPageSize={otherInfo.pageSize}
                        total={otherInfo.total} hideOnSinglePage={true}/>
          </div>
        </>
      </UnitBox>
    </FansStyle>
  );
});
